<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>食谱管理</title>
	<link rel="stylesheet" href="/css/common2.css">
	<link rel="stylesheet" href="/css/cookbook.css">
</head>

<body>
	<div id="vue-root" style="margin-top: 30px;">

		<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
			<input type="file" id="file" v-validate="'size:10240'" data-vv-as="图片" ref="file" name="file"
				accept="image/*" @change="upload">
		</form>

		<div class="refresh action-buttons" style="margin-left: 2%;" onclick="location.reload()">刷新</div>
		<div class="add action-buttons" style="margin-left: 5px;" v-if="isEdit" @click="addMeal">
			<a style="color: white">添加餐段</a>
		</div>
		<div class="delete" v-if="isEdit" @click="save">保存</div>

		<div class="cook-top-right">
			<!-- 日历 -->
			<div style="position: relative; height: 30px;" v-show="!isEdit">
				<img class="calendar" src="../image/calendar.png" alt="">
				<input placeholder="选择日期" readonly class="other" v-model="date" id="Time" />
			</div>
			<!-- 滑块改状态 -->
			<div class="state" @click="isEdit=!isEdit" :style="{backgroundColor:isEdit?'#f56b6c':'#419dfa'}">
				<span>查看</span>
				<div class="circle" :style="{left:isEdit?'0%':'50%'}"></div>
				<span>修改</span>
			</div>
		</div>


		<div class="table">
			<table class="table_top">
				<thead>
					<tr>
						<th class="one title">
							<span>餐名</span>
							<span>时间</span>
							<div class="line"></div>
						</th>

						<th v-for="(d,i) in dates" :key="i">{{dates[i]}} <br />
							<span style="font-size: 18px;margin-top: 2px;">星期{{weekdays[i]}}</span>
						</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(item,index) in meals" :key="index">
						<!-- 餐段名 -->
						<td class="embody">
							<p class="mealPop">{{item.title}}</p>
							<div v-if="isEdit" class="embody-hover">
								<div class="alter-del">
									<div class="embody-pic" @click="editMeal(item)">
										<img src="../image/embodyAlter.png" alt="">
									</div>
									<div class="embody-pic" @click="delMeal(index)">
										<img src="../image/embodyDel.png" alt="">
									</div>
								</div>
							</div>
						</td>
						<!-- 餐段内容 -->
						<td class="embody" v-for="(data,index1) in item.days" :key="index1">
							<!-- 餐段头像 -->
							<div class="cookPic">
								<img v-if="data.pics.length" :src="getImg(data.pics[0])" alt="">
							</div>
							<!-- 餐段描述 -->
							<p style="font-size:14px;" class="nowrap">{{data.food}}</p>
							<!-- 餐段hover弹出层 -->
							<div class="embody-hover">
								<div v-if="isEdit" class="alter-del">
									<div class="embody-pic" @click="editFood(data)">
										<img src="../image/embodyAlter.png" alt="">
									</div>
									<div class="embody-pic" @click="delFood(item,index1)">
										<img src="../image/embodyDel.png" alt="">
									</div>
								</div>
								<div v-else-if="data.food||data.pics.length>0" class="look">
									<div class="embody-pic" @click="editFood(data)">
										<img src="../image/embodyLook.png" alt="">
									</div>
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<!-- 窗口弹出 -->
		<div class="pop-up" v-if="mealPop" @click="mealPop=false">
			<div class="pop-content" @click.stop>
				<div class="one-cook">
					<h2>餐段名</h2>
					<div class="cook-title" style="padding: 1vh 0;">
						<span>餐段:</span>
						<input v-model="mealName">
					</div>
					<div class="operation">
						<button @click="mealPop=false">取消</button>
						<button @click="sure">确定</button>
					</div>
				</div>
			</div>
		</div>

		<div class="pop-up" v-if="foodPop" @click="foodPop=false">
			<div class="pop-content" @click.stop>
				<div class="one-cook">
					<h2 v-if="isEdit">修改餐段</h2>
					<h2 v-else>查看餐段</h2>
					<div class="cook-title">
						<span>图片:</span>
						<div class="cook-title-img">
							<ul>
								<li style="height: 50px;margin: 0 4px;" v-for="pic in popFood.pics" :key="pic">
									<img :src="getImg(pic)" alt="">
								</li>
							</ul>
						</div>
						<!-- 图片添加按钮 -->
						<label for="file">
							<img style="height: 50px;" v-if="isEdit" src="../image/addPic.png" alt="">
						</label>
					</div>
					<div class="cook-title">
						<span>内容:</span>
						<textarea rows="3" v-model="popFood.food" v-if="isEdit" placeholder="请输入餐段内容,如有多个餐名及图片请用英文,逗号隔开对应相应的图片"></textarea>
						<pre v-text="popFood.food" v-else></pre>
					</div>
					<div class="operation">
						<button v-if="isEdit" @click="foodPop=false">取消</button>
						<button v-if="isEdit" @click="sure1">确定</button>
						<button v-else style="width: 100%;" @click="foodPop=false">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>


	<script src="/lib/laydate/laydate.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/auth_util.js"></script>

	<script>

		function days(date) {
			var day = new Date(date).getDay(), a = [], i;
			date = dayjs(new Date(date));
			if (day == 0) day = 7;
			for (i = 1 - day; i < 8 - day; i++)
				a.push(date.add(i, 'day').format('YYYY-MM-DD'));
			return a;
		}

		function meal(title) {
			return {
				title: title,
				days: [0, 1, 2, 3, 4, 5, 6].map(function (i) {
					return { food: '', pics: [] };
				})
			};
		}

		function initData() {
			return ['早餐', '午餐', '晚餐'].map(meal);
			
		}

		var schoolId = top_params().id;

		var app = new Vue({
			el: '#vue-root',
			data: {
				weekdays: '一二三四五六日'.split(''),
				date: dayjs().format('YYYY-MM-DD'),
				isEdit: false,
				mealPop: false,
				foodPop: false,
				mealName: '',
				meals: initData(),
				adding: false,
				popFood: {}
			},
			created: function () {
				this.getData();
				abled('cookbook',this)
			},
			methods: {
				getData: function () {
					axios.get('/pc/cookbook2/' + schoolId, {
						params: { date: this.date }
					}).then(function (res) {
						this.meals = res.data && res.data.data || initData();
					}.bind(this));
				},
				editMeal: function (meal) {
					this.adding = false;
					this.mealPop = true;
					this.mealName = meal.title;
					this.popMeal = meal;
				},
				addMeal: function () {
					this.adding = true;
					this.mealPop = true;
					this.mealName = '';
				},
				sure: function () {
					this.mealPop = false;
					if (this.adding) this.meals.push(meal(this.mealName));
					else this.popMeal.title = this.mealName;
				},
				delMeal: function (index) {
					if (!confirm('确认删除？')) return;
					this.meals.splice(index, 1);
				},
				editFood: function (food) {
					this.foodPop = true;
					this.popFood = copy(food);
					this.popFood1 = food;
				},
				delFood: function (item, index) {
					Vue.set(item.days, index, { food: '', pics: [] });
				},
				sure1: function () {
					this.foodPop = false;
					this.popFood1.food = this.popFood.food;
					this.popFood1.pics = this.popFood.pics;
				},
				save: function () {
					axios.post('/pc/cookbook2?date=' + this.date, {
						agentId: schoolId,
						data: this.meals
					}).then(function (res) {
						alert('成功');
						this.isEdit = false
					}.bind(this));
				},
				getImg: function (pic) {
					return '/static/' + schoolId + '/cookbook/' + pic;
				},
				upload: function () {
					axios.post('/pc/upload/cookbook?schoolId=' + schoolId,
						new FormData(this.$refs.form)).then(function (res) {
							this.popFood.pics.push(res.data.data);
							this.$refs.file.value = '';
						}.bind(this));
				}
			},
			computed: {
				dates: function () {
					return days(this.date);
				}
			},
			watch: {
				date: function (nv, ov) {
					this.getData();
				}
			}
		});

		laydate.render({
			elem: '#Time',
			format: 'yyyy-MM-dd',
			done: function (value) {
				app.date = value;
			}
		});
	</script>

</body>

</html>